<template>
  <el-dialog
    :close-on-click-modal="false"
    width="45%"
    top="5vh"
    title="新增会议事项"
    :visible.sync="innerVisible"
    :before-close="cancelAdd"
    lock-scroll
    append-to-body
  >
    <el-form
      class="edit-form"
      status-icon
      :model="datas"
      :rules="rules"
      @keyup.enter.native="save"
      ref="innerEditForm"
    >
      <el-row :gutter="10">
        <el-col :span="23">
          <el-form-item prop="mettingTime" label="会议时间" :label-width="baseStyle.width">
            <el-date-picker
              v-model="datas.mettingTime"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="23" v-for="(data,index) in datas.itemsThins" :key="index">
          <el-col :span="20">
            <el-form-item :prop="data.things" :label="data.name" :label-width="baseStyle.width">
              <el-input v-model="data.things" type="textarea" :readonly="false" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" v-if="isAddInner">
            <el-button
              v-if="datas.itemsThins.length==index+1"
              size="small"
              style="margin-left:20px"
              @click="delThings(data.name)"
            >删除事项</el-button>
          </el-col>
        </el-col>

        <el-col :span="23" v-if="isAddInner">
          <el-button
            :type="'primary'"
            size="small"
            style="margin-left:140px"
            @click="AddThings"
          >新增事项</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelAdd">取 消</el-button>
      <el-button :type="'primary'" @click.native="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import API from "@apis/newProject";

export default {
  name: "InnerDialog",
  props: {
    innerSave: Function,
    baseStyle: Object,
    isAddInner: Boolean,
    innerData:Object
  },
  data() {
    const rules = this.getRules();
    return {
      rules,
      innerVisible: false,
      count: 1,
      datas: {
        mettingTime: "",
        itemsThins: [{ name: "事项 1", things: "" }]
      }
    };
  },
  computed: {
    // datas() {
    //   if (this.isAddInner) {
    //     return {
    //       mettingTime: "",
    //       itemsThins: [{ name: "事项 1", things: "" }]
    //     };
    //   }else{
    //     console.log(this.innerData,"innerData")
    //     return {
    //       mettingTime: "",
    //       itemsThins: [{ name: "事项 1", things: "" }]
    //     }
    //   }
    // }
    // saveData() {
    //   const data = {};
    //   this.datas.itemsThins.map(item => {
    //     data;
    //   });
    //   return data;
    // }
  },
  created() {
    this.datas.mettingTime = this.setDefaultDate();
  },
  methods: {
    setDefaultDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + "-" + month + "-" + strDate;
      return currentdate;
    },
    openAddThings() {
      this.innerVisible = true;
    },
    AddThings() {
      this.count = this.count + 1;
      this.datas.itemsThins.push({
        name: `事项 ${this.count}`
      });
    },
    delThings(data) {
      if (this.count > 1) {
        this.count = this.count - 1;
        this.datas.itemsThins = this.datas.itemsThins.filter(
          val => val.name !== data
        );
      } else {
        this.$message.warning("至少有一项");
      }
    },
    cancelAdd() {
      this.count = 1;
      this.datas = {
        mettingTime: "",
        itemsThins: [{ name: "事项 1", things: "" }]
      };
      this.datas.mettingTime = this.setDefaultDate();
      this.innerVisible = false;
    },
    setDataFormat(data) {
      let fullData = data.filter(item => {
        return item.name && item.things;
      });
      return fullData.map(item => {
        return { content: item.things };
      });
    },
    save() {
      this.$refs.innerEditForm.validate(valid => {
        if (valid) {
          let saveDate = this.setDataFormat(this.datas.itemsThins);
          this.innerSave({
            date_time: this.datas.mettingTime,
            content_list: saveDate
          });
        } else {
          return false;
        }
      });
    },
    isEmpty(value) {
      if (!value || value.length < 1) {
        return true;
      }
      return false;
    },
    validate(id, prop, value, des) {
      if (this.isEmpty(value)) {
        return {
          success: false,
          message: `请填写${des}`
        };
      }
      return { success: true };
    },
    getRules() {
      return {
        name: [
          {
            validator: (rule, value, callback) => {
              const result = this.validate(
                this.datas.id,
                "name",
                this.datas.name,
                "项目名称"
              );
              if (!result.success) {
                callback(new Error(result.message));
                return;
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss">
</style>